<template>
<!--    图方便,直接用tailwind编写css-->
    <div class="border mb-4">
        <div class="flex px-4 py-2 hover:bg-gray-200 grid grid-cols-8 items-center cursor-pointer" v-for="index in 5" :key="index">
            <div class="col-span-4 flex items-center">
                <n-image src="http://p1.music.126.net/LhCn2Pmw4dVW2k15uK28dA==/18905002928183168.jpg?param=50y50" class="border"></n-image>
                <p class="ml-4">专栏名字</p>
            </div>
            <div>
                <p>阅读总量: 9999</p>
            </div>
            <div class="col-span-2">
                <p>订阅次数: 1/8/2021 18:00 am</p>
            </div>
            <div class="col-span-1">
                <p>多少期</p>
            </div>
        </div>
    </div>
</template>

<script>
import {NImage} from 'naive-ui';
export default {
    // 用户创建的专栏
    name: "SpecialColumn",
    props: {
        id: {
            type: String,
            default: '-1'
        }
    },
    setup() {
        const TAG = "SpecialColumn.vue";
    },
    components: {
        NImage
    }
}
</script>

<style scoped>
</style>